<template>
  <div class="product-list-container">
    <div class="filter-section">
      <div class="filter-item">
        <span class="filter-label">编号:</span>
        <el-input v-model="productId" placeholder="请输入编号"></el-input>
      </div>
      <div class="filter-item">
        <span class="filter-label">产品名称:</span>
        <el-input v-model="productName" placeholder="请输入产品名称"></el-input>
      </div>
      <div class="filter-item">
        <span class="filter-label">产品类型:</span>
        <el-input v-model="productType" placeholder="请输入产品类型"></el-input>
      </div>
      <div class="filter-item">
        <span class="filter-label">价值:</span>
        <el-input v-model="productValue" placeholder="请输入价值"></el-input>
      </div>
      <div class="filter-item">
        <span class="filter-label">状态:</span>
        <el-select v-model="status" placeholder="请选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="1"></el-option>
          <el-option label="已下架" value="2"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="searchProducts">搜索</el-button>
      <el-button @click="clearFilters">清空已选</el-button>
    </div>
    <div class="table-section">
      <el-table :data="products" style="width: 100%" height="100%">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="productName" label="产品名称" width="150"></el-table-column>
        <el-table-column prop="productType" label="产品类型" width="120"></el-table-column>
        <el-table-column prop="description" label="产品描述" width="180"></el-table-column>
        <el-table-column prop="value" label="价值" width="120"></el-table-column>
        <el-table-column prop="expireDate" label="过期时间" width="150"></el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="100"></el-table-column>
        <el-table-column label="产品图" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.imageUrl" alt="Product Image" style="width: 50px; height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180"></el-table-column>
        <el-table-column label="操作" fixed="right" width="400">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="toggleTop(scope.row)">{{ scope.row.takeTop === 1 ? '取消置顶' : '置顶' }}</el-button>
            <el-button type="primary" size="small" v-if="scope.row.takeTop === 1 && !scope.row.maxSortValue" @click="moveUp(scope.row)">上移↑</el-button>
            <el-button type="primary" size="small" v-if="scope.row.takeTop === 1 && scope.row.sortValue > 1" @click="moveDown(scope.row)">下移↓</el-button>
            <el-button type="primary" size="small" @click="toggleStatus(scope.row)">{{ scope.row.status === '1' ? '下架' : '上架' }}</el-button>
            <el-button type="text" @click="viewDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-section">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          style="margin-top: 20px; text-align: center;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import requestUtil from '../../network/request'

export default {
  name: 'ProductList',
  data() {
    return {
      productId: '',
      productName: '',
      productType: '',
      productValue: '',
      status: '',
      products: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      const params = {
        id: this.productId,
        productName: this.productName,
        productType: this.productType,
        value: this.productValue,
        status: this.status,
        currentPage: this.currentPage,
        size: this.pageSize,
      };

      requestUtil.post('/product/list', params).then(res => {
        if (res.code === '0') {
          this.products = res.result.products;
          this.total = res.page.totalCount; // 使用接口返回的 totalCount
          this.currentPage = res.page.currentPage; // 使用接口返回的 currentPage
          this.pageSize = res.page.pageSize; // 使用接口返回的 pageSize
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    searchProducts() {
      this.currentPage = 1; // 重置当前页为第一页
      this.fetchProducts();
    },
    clearFilters() {
      this.productId = '';
      this.productName = '';
      this.productType = '';
      this.productValue = '';
      this.status = '';
      this.searchProducts();
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchProducts();
    },
    getStatusClass(status) {
      switch (status) {
        case '1':
          return 'status-normal';
        case '2':
          return 'status-offline';
        default:
          return '';
      }
    },
    getStatusText(status) {
      switch (status) {
        case '1':
          return '正常';
        case '2':
          return '已下架';
        default:
          return '未知状态';
      }
    },
    viewDetails(product) {
      // 这里可以跳转到详情页面或弹出详情对话框
      console.log('View details:', product);
    },
    operateProduct(id, operateType) {
      const params = {
        id: id,
        operateType: operateType,
      };

      requestUtil.post('/product/operate', params).then(res => {
        if (res.code === '0') {
          this.$message.success('操作成功');
          this.fetchProducts(); // 刷新列表
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    toggleStatus(product) {
      const topOperate = product.status === '1' ? 'STOCK_DOWN' : 'STOCK_UP';
      this.operateProduct(product.id, topOperate);
    },
    toggleTop(product) {
      const topOperate = product.takeTop === 1 ? 'CANCEL_TOP' : 'DO_TOP';
      this.operateProduct(product.id, topOperate);
    },
    moveUp(product) {
      if (!product.maxSortValue) {
        this.operateProduct(product.id, 'MOVE_UP');
      }
    },
    moveDown(product) {
      if (product.sortValue > 1) {
        this.operateProduct(product.id, 'MOVE_DOWN');
      }
    },
  },
};
</script>

<style scoped>
.product-list-container {
  padding: 0;
  height: 100%; /* 设置容器高度为视口高度 */
}

.filter-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  height: 90px; /*搜索框高度*/
}

.filter-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.filter-label {
  margin-right: 10px;
}

.filter-section .el-select {
  width: 150px;
}

.filter-section .el-input {
  width: 200px;
}

.filter-section .el-button {
  margin-left: 10px;
}

.table-section {
  width: 100%;
  //flex: 1; /* 使表格部分占据剩余空间 */
  height: calc(100% - 170px); /*90+20+40+20*/
}

.status-normal {
  color: #28a745;
}

.status-offline {
  color: #dc3545;
}

.pagination-section {
  margin-top: 20px;
  text-align: center;
  height: 40px;
}
</style>
